<style>
.layui-input-block{
margin-left:120px;
}
</style>
<form class="layui-form" action="" id="orderEditForm">
<div class="layui-row"  style="margin-top:10px;">
  <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
    <label class="layui-form-label" style="width:120px;">公司名称</label>
    <div class="layui-input-block" style="width:200px;">
    	<select name="companyId">
    		<option value="1">深圳企智达有限公司</option>
    	</select>
    </div>
  </div>
  <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
    <label class="layui-form-label" style="width:120px;" lay-filter="sourceBillNo">来源单号</label>
    <div class="layui-input-block" style="width:200px;">
      <button class="layui-btn" id="numBtn" type="button">获取</button>
    </div>
  </div>
</div>
<div class="layui-row"  style="margin-top:10px;"> 
  	<div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
	    <label class="layui-form-label" style="width:120px;">客户名称</label>
	    <div class="layui-input-block" style="width:200px;">
	      <select style="width:200px;height:58px;" name="customerId" lay-verify="required" required lay-ignore>
	      </select>
	    </div>
    </div>
  	<div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
	    <label class="layui-form-label" style="width:120px;" lay-filter="billNo">出库单编号</label>
	    <div class="layui-input-block" style="width:200px;">
	      <input type="text" class="layui-input" name="billNo"/>
	    </div>
  	</div>
</div>
<div class="layui-row"  style="margin-top:10px;">
  
  <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
    <label class="layui-form-label" style="width:120px;" lay-filter="supplierContacts">客户联系人</label>
    <div class="layui-input-block" style="width:200px;">
      <select name="customerContactId" lay-verify="required" required >
      </select>
    </div>
  </div>
  <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
    <label class="layui-form-label" style="width:120px;" lay-filter="statementId">结算方式</label>
    <div class="layui-input-block" style="width:200px;">
      <select name="statementId"  required lay-filter="statementId">
	        <option value="">请选择结算方式</option>
	  </select>
      <input type="hidden" name="statementNamevar" value=""/>
	  <input type="hidden" name="statementCurrencyId"  =""/>
    </div>
  </div>
</div>
<div class="layui-row"  style="margin-top:10px;">  
  <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
    <label class="layui-form-label" style="width:120px;" lay-filter="statementDays">结算天数</label>
    <div class="layui-input-block" style="width:200px;">
      <input name="statementDays" class="layui-input" style="background-color:#f3f2f2" lay-verify="required" readonly />
      </select>
    </div>
  </div>
  <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
    <label class="layui-form-label" style="width:120px;" lay-filter="statementTaxRate">税率</label>
    <div class="layui-input-block" style="width:200px;">
      <input name="statementTaxRate" class="layui-input" style="background-color:#f3f2f2" lay-verify="required" readonly />
    </div>
  </div>
</div>
<div class="layui-row"  style="margin-top:10px;">  
  
  <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
    <label class="layui-form-label" style="width:120px;" lay-filter="statementExchangeRate">汇率</label>
    <div class="layui-input-block" style="width:200px;">
      <input name="statementExchangeRate" class="layui-input" style="background-color:#f3f2f2" lay-verify="required" readonly />
    </div>
  </div>
  <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
		    <label class="layui-form-label" style="width:120px;">备注</label>
		    <div class="layui-input-block" style="width:540px;">
		      <textarea class="layui-textarea"  name="remark"></textarea>
		    </div>
   </div>
</div>
<div class="layui-row"  style="margin-top:10px;">
  <div class="layui-col-xs12 layui-col-sm12 layui-col-md12" style="text-align:center;">
    <div class="layui-input-block">
          <button class="layui-btn" lay-submit="" lay-filter="formSubmit" authcode="900103">提交</button>
      <button type="button" class="layui-btn layui-btn-primary" id="closeBtn">关闭</button>
    </div>
  </div>
</div>

</form>
<script>
var form1 = $("#orderEditForm");
layui.use('form', function(){
	
	  $("[name='customerId']").select2({
		  ajax: {
			    url: "/com/supplier/customer/supplierList",
			    dataType: 'json',
			    delay: 350,
			    data: function (params) {
			      console.log(params.page)
			      return {
			        name: params.term, // search term
			        companyid:1,
			        page: params.page,
			        limit:30
			      };
			    },
			    processResults: function (data, params) {
			      params.page = params.page || 1;
			      console.log(JSON.stringify(data))
			      return {
			        results: data.data,
			        pagination: {
			          more: (params.page * 30) < data.count
			        }
			      };
			    },
			    cache: true
			  },
			  escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
			  minimumInputLength: 0,//最小输入字符，输入最小字符后开始后台请求
			  templateResult: formatRepo, // 处理远程返回数据
			  templateSelection: formatRepoSelection // 设置下拉选中后显示内容
			});
	  
	  	function formatRepo (repo) {
	  		//下拉展示内容可以修改自定义样式
	      if (repo.loading) return repo.text;
	      var markup = "<div class=\"layui-row\">" +
			      "<div class=\"layui-col-xs4 layui-col-sm4 layui-col-md3\">" +
			      	"<div class=\"grid-demo grid-demo-bg1\">"+repo.no+"</div>" +
			     "</div>"+
			     "<div class=\"layui-col-xs8 layui-col-sm8 layui-col-md9\">" +
			      	"<div class=\"grid-demo grid-demo-bg1\">"+repo.name+"</div>" +
			     "</div>";

	      return markup;
	    }

	    function formatRepoSelection (repo) {
	      return repo.name;//选中返回select中的值
	    }
	  var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
	  //……
	  //但是，如果你的HTML是动态生成的，自动渲染就会失效
	  //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
	  form.render();
	 /*  form.on('select(supplierName)', function(data){
		  console.log(data.elem); //得到select原始DOM对象
		  console.log(data.value); //得到被选中的值
		  console.log(data.othis); //得到美化后的DOM对象
		  $.getJSON("/com/suppliercustomer/contacts/"+data.value,function(data){
			  var html = [];
			  html.push("<option value=''>请选择联系人</option>")
			  $.each(data,function(i,item){
				  html.push("<option value='"+item.id+"'>"+item.name+"</option>")
			  })
			  $("select[name='contacts']").html(html.join(""));
              form.render('select'); //这个很重要
		  });
		}); */
	  
	  //select2选中事件
	  $("[name='customerId']").on("select2:select",function(e){
		  console.log(e.params)
		  var id = e.params.data.id;
		  
		  //获取税率信息
		  $.getJSON("/stock/inbound/queryTax/"+id+"/"+e.params.data.companyId,function(data){
              $("input[name='statementTaxRate']").val(data.value);
		  });
		  
		//选择供应商带出供应商结算方式
		  $.getJSON("/stock/inbound/querySettleMethod/"+id,function(data){
			  var html = [];
			  html.push("<option value=''>请选择结算方式</option>")
			  $.each(data,function(i,item){
				  if(item.isDefault==1){
				  	html.push("<option value='"+item.id+"' data-statementTaxRate='"+item.taxRate+"' data-statementExchangeRate='"+item.exchangeRate
				  			+"' data-currencyId='"+item.currency+"' data-currencyName='"+item.currencyName+"' data-statementDays='"+item.dates+"' selected>"
				  			+item.statementType+"</option>")
				  	  $("input[name='statementDays']").val(item.dates);
					  $("input[name='statementExchangeRate']").val(item.exchangeRate);
					  $("input[name='currencyName']").val(item.currencyName);
					  $("input[name='statementNamevar']").val(item.statementType);
					  $("input[name='statementCurrencyId']").val(item.currency);
				  }else{
				  html.push("<option value='"+item.id+"' data-statementTaxRate='"+item.taxRate+"' data-statementExchangeRate='"+item.exchangeRate
				  			+"' data-currencyId='"+item.currency+"' data-currencyName='"+item.currencyName+"' data-statementDays='"+item.dates+"' selected>"
				  			+item.statementType+"</option>")
				  }
			  });
			  
			  //默认显示选中的结算方式信息
			  $("select[name='statementId']").html(html.join(""));
              form.render('select'); //这个很重要
              
		  });
		  
		  $.getJSON("/com/supplier/customer/contacts/"+id,function(data){
			  var html = [];
			  html.push("<option value=''>请选择联系人</option>")
			  $.each(data,function(i,item){
				  html.push("<option value='"+item.id+"'>"+item.name+"</option>")
			  })
			  $("select[name='customerContactId']").html(html.join(""));
              form.render('select'); //这个很重要
		  });
	  })
	  
	  //结算方式选择
	   form.on("select(statementId)",function(data){
		  var $option = $(data.elem).find("option[value='"+data.value+"']");
		  $("input[name='statementDays']").val($option.attr("data-statementDays"));
		  $("input[name='statementExchangeRate']").val($option.attr("data-statementExchangeRate"));
		  $("input[name='currencyName']").val($option.attr("data-currencyName"));
		  $("input[name='statementId']").val($option.att("value"));
		  $("input[name='statementNamevar']").val($option.text());
		  $("input[name='statementCurrencyId']").val($option.attr("data-currencyId"));
	  });
	//确定按钮
	   function reloadData(){ 
			$(".layui-laypage-btn")[0].click();
		}
	
	  $("#closeBtn").click(function(){
		  layer.closeAll(editdialogindex);
	  })
	  //监听提交
	  form.on('submit(formSubmit)', function(data){
	    var supplierId = $("[name='customerId']").select2("data")[0];
	    if(supplierId==null||supplierId==""){
	    	layer.msg('客户必填', {icon: 5});
	    	return false;
	    }
	    $.ajax({
            type: "GET",
            url: "/stock/puoutbound/save",
            data: $("#orderEditForm").serializeJson(),
            dataType: "json",
            success: function(data){
            	if(data.code==200){
            		//关闭弹出层
            		layer.msg("新增成功！", {icon: 6});
           	    layer.closeAll(editdialogindex);
           	    //更新表格数据
           	 	reloadData();
            	}else{
            		layer.msg(data.message, {icon: 5});
            	}
            }
           });
	    //关闭
	    layer.closeAll();
	    //更新表格数据
	    //ins.reload({url: '/stock/outbound/list',where:{'companyId':$("[name='companyId']").val(),'reviewStatus':'0'}});
	    reloadData()
	    return false;
	  });
		
	  //关闭按钮
	  $("#closeBtn").click(function(){
		  layer.closeAll();
	  })
	}); 


$("#numBtn").click(function(){
	
	layer.closeAll();
	menuOpen("/stock/puoutbound/addpu","新增采购退货");
	
});
</script>
